<template>
	<div id="Cart">
		<!-- <h1>购物车页面</h1>-->
		<div class="top_top">
			<ul class="top">
				<li>
					<span class="iconfont icon-wancheng"></span>
					<span class="text">正品保证</span>
				</li>
				<li>
					<span class="iconfont icon-wancheng"></span>
					<span class="text">精挑细选</span>
				</li>
				<li>
					<span class="iconfont icon-wancheng"></span>
					<span class="text">售后无忧</span>
				</li>
			</ul>
			<div class="con_top">
				<div class="left">
					<span>购物数量</span>
					<span>{{ list.length }}</span>
				</div>
				<div class="right" v-show="list.length == 0 ? false : true">
					<button @click="but = !but">管理</button>
				</div>
			</div>
		</div>
		<!-- 空 -->
		<kong :text="'暂无商品，去随便逛逛吧！'" :kongshow="list.length == 0 ? true : false"></kong>
		<!-- 空 -->
		<!-- 商品列表 -->
		<van-checkbox-group v-model="result" @change="cheChange">
			<div class="list" v-show="list.length == 0 ? false : true">
				<ul>
					<li v-for="(item,index) in list" :key="index">
						<div class="left">
							<van-checkbox v-model="item.ID" :name="item.ID" checked-color="#ee0a24"></van-checkbox>
						</div>
						<div class=" conter">
							<img :src="item.pro_img" alt="" @click="$router.push('/home/homedetailed/'+item.pro_id)">
						</div>
						<div class="right">

							<div class="top">
								<p>{{ item.pro_title }}</p>
							</div>

							<div class="conter_ri" v-if="item.pro_sku[1].type_text">
								<p>{{ item.pro_sku[1].type_text }}<span
										v-if="item.pro_sku[1].model_text">,</span>{{ item.pro_sku[1].model_text }}<span
										class="iconfont icon-xiangxiajiantou"></span></p>
							</div>

							<div class="ri_bottom">
								<h4><span>￥</span>{{ item.pro_price }}</h4>
								<div class="but">
									<button @click="editNum(0,item,index)">
										-
									</button>
									<span>{{ item.pro_num }}</span>
									<button @click="editNum(1,item,index)">
										+
									</button>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</van-checkbox-group>
		<!-- 商品列表 -->
		<div class="bottom" v-show="list.length == 0 ? false : true">
			<div class="left">
				<van-checkbox v-model="checked" checked-color="#ee0a24" @click="add()">全选({{ result.length }})
				</van-checkbox>
			</div>
			<div class="right">
				<div class="li1" v-if="!but">
					<span>￥{{ renum.toFixed(2) }}</span>
					<button @click="submit_to()">立即下单</button>
				</div>
				<div class="li2" v-if="but">
					<button>收藏</button>
					<button @click="modal = true">删除</button>
				</div>
				<!-- 商品商品弹出层 -->
				<Modal v-model="modal" title="提示" @on-ok="delCart()" @on-cancel="cancel">
					<p>确定删除该商品吗？</p>
				</Modal>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant'
	import {
		getCartList,
		delCartNum,
		editCartNum
	} from '@/api/cart'
	import kong from '@/components/kong.vue'
	export default {
		name: "Cart",
		components: {
			kong
		},
		data() {
			return {
				modal: false,
				but: false,
				checked: false,
				// 获取的数据
				list: [],
				// 存放商品的ID，进行单选/全选 
				result: [],
				// 总价
				counts: 0,
			}
		},
		created() {
			// 获取购物车数据
			this.getlist()
		},
		computed: {
			kongshow() {
				if (this.list.length == 0) {
					return true
				} else {
					return false
				}
			},
			renum() {
				let nums = 0
				this.list.forEach(item => {
					let index = this.result.indexOf(item.ID)
					if (index != -1) {
						nums += Number(item.pro_price) * Number(item.pro_num)
					}
				})
				return nums
			},
		},
		methods: {
			// 取消删除商品
			cancel() {
				this.$Message.info('祝您购物愉快！');

			},
			// 删除商品
			delCart() {
				this.result.forEach(item => {
					delCartNum({
						address_id: item
					}).then(res => {
						console.log(res)
						this.getlist()
						Toast.success('删除成功');
					})
				})
			},

			cheChange(e) {
				if (e.length != this.list.length) {
					this.checked = false;
				} else {
					this.checked = true;
				}
			},
			// 获取购物车数据
			getlist() {
				getCartList().then(res => {
					console.log(res)
					if (res.data.code == 1) {
						console.log(res.data.result)
						this.list = res.data.result
						this.list.forEach(item => {
							// item.check = this.checked;
							item.pro_sku = JSON.parse(item.pro_sku.replace("'", "").replace("'", ""));
						})
						console.log(this.list)
					}
				})
			},

			// 全选
			add() {
				if (this.checked == true) {
					this.list.forEach(item => {
						let index = this.result.indexOf(item.ID);
						if (index == -1) {
							this.result.push(item.ID)
						}
					})
				} else {
					this.result = [];
				}
			},

			// 商品数量的修改
			editNum(type, item, index) {
				let items = JSON.parse(JSON.stringify(item))
				let number = 0;
				if (type == 1) {
					number = ++items.pro_num
				} else {
					number = --items.pro_num
				}
				if (number < 1) {
					console.log(number);
					return
				}
				this.list[index].pro_num = number;
				editCartNum({
					address_id: items.pro_id,
					number: number,
				})
			},

			// 订单提交
			submit_to() {
				if (this.result.length != 0) {
					// 被选中的商品数据
					let Arr = [];
					this.result.forEach(i => {
						this.list.forEach(y => {
							if (i == y.ID) {
								Arr.push(y)
							}
						})
					})
					localStorage.setItem('arr', JSON.stringify(Arr))
					console.log("订单提交", Arr)
					this.$router.push("/settle_accounts")
				} else {
					Toast('请选择商品！');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	$width:(100vw / 375);

	#Cart {
		width: 100vw;
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-top: 80 * $width;

		.top_top {
			width: 100%;
			position: fixed;
			top: 0;
			z-index: 999;

			>.top {
				height: 38 * $width;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				font-size: 13 * $width;
				background-color: #f5f5f5;

				.iconfont {
					font-size: 14 * $width;
					margin-right: 3 * $width;
				}
			}

			>.con_top {
				height: 40 * $width;
				width: 100%;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 15 * $width;

				.left {
					span:nth-of-type(2) {
						color: #f00;
						margin-left: 5 * $width;
					}
				}

				.right {
					button {
						color: #282828;
						font-size: 13 * $width;
						width: 55 * $width;
						height: 24 * $width;
						border-radius: 3 * $width;
						border: 1 * $width solid #868686;
						background-color: #fff;
						line-height: 24 * $width;
					}
				}
			}
		}


		.bottom {
			position: fixed;
			bottom: 50 * $width;
			width: 100%;
			height: 50 * $width;
			background-color: #fafafa;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 15 * $width;

			.right {
				.li1 {
					span {
						color: #f00;
					}

					button {
						color: #fff;
						font-size: 14 * $width;
						width: 90 * $width;
						height: 30 * $width;
						border-radius: 25 * $width;
						text-align: center;
						line-height: 30 * $width;
						margin-left: 11 * $width;
						background-color: #f00;
						border: none;
					}
				}

				.li2 {
					button {
						color: #ea4335;
						font-size: 14 * $width;
						width: 80 * $width;
						height: 30 * $width;
						border-radius: 2 * $width;
						text-align: center;
						line-height: 30 * $width;
						margin-left: 11 * $width;
						background-color: #fff;
						border: 1 * $width solid #ea4335;
					}

					button:nth-of-type(2) {
						color: #b8b8b8;
						border: 1 * $width solid #b8b8b8;
					}
				}
			}
		}
	}

	.list {
		margin: 10 * $width 0 30 * $width 0;
		width: 100%;
		padding-bottom: 100 * $width;

		>ul {
			width: 100%;

			>li {
				width: 100%;
				height: 115 * $width;
				background-color: #fff;
				display: flex;
				align-items: center;
				padding: 0 15 * $width;
				border-bottom: 1 * $width solid #eee;

				>.conter {
					margin: 0 10 * $width;

					img {
						width: 80 * $width;
						height: 80 * $width;
						border-radius: 4 * $width;
					}
				}

				>.right {
					height: 88 * $width;
					width: 222 * $width;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					>.top {
						height: 16 * $width;

						p {
							font-size: 15 * $width;
							text-overflow: ellipsis;
							overflow: hidden;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
					}

					>.conter_ri {
						width: 150 * $width;
						height: 20 * $width;
						background-color: #f5f5f5;

						p {
							font-size: 10 * $width;
							text-align: center;
							line-height: 20 * $width;
							overflow: hidden;

							span {
								font-size: 1 * $width;
								margin-left: 3 * $width;
							}
						}
					}

					>.ri_bottom {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.but {
							display: flex;
							align-items: center;

							span {
								text-align: center;
								display: inline-block;
								width: 38 * $width;
								height: 25 * $width;
								border-bottom: 1 * $width solid #a4a4a4;
								border-top: 1 * $width solid #a4a4a4;
							}

							button {
								width: 38 * $width;
								height: 25 * $width;
								background-color: #fff;
								border: 1 * $width solid #a4a4a4;
							}
						}
					}
				}
			}
		}
	}
</style>
